<!--
 * @Author: your name
 * @Date: 2020-08-11 13:44:03
 * @LastEditTime: 2020-08-24 14:35:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Workflow\src\views\test\index.vue
-->
<template>
<div v-click-outside="closeHandler">
    <p>指令测试：v-copy,v-focus,v-click-outside</p>

    复制： <button v-copy="copyText">
        <a-icon type="copy" :style="{ fontSize: '36px' }" />
    </button>
    <br />
    <br />
    <label for="test">
        <input v-focus name="test" type="text" />
    </label>
    <br />
    <br />

    <p>属性修饰符：sync使用</p>
    <button class="parent" @click="showChild">显示子组件</button>
    <h2>这是父级</h2>
    <child :isShow.sync="isShow" v-show="isShow"></child>

    <br />
    <br />
    模态框
    <a-button type="default" @click="dialogVisible=!dialogVisible">显示模态框</a-button>

    <a-modal v-dialog-drag title="Title" :visible="dialogVisible" :confirm-loading="confirmLoading" @ok="dialogVisible=!dialogVisible" @cancel="dialogVisible=!dialogVisible">
        <p>{{ ModalText }}</p>
    </a-modal>
</div>
</template>

<script>
// import { Message } from 'element-ui';
import child from "./child";
export default {
    components: {
        child,
    },
    data() {
        return {
            isShow: false,
            copyText: "你好，复制成功",
            dialogVisible: false,
            confirmLoading: false,
            title: '这是一段信息',
            ModalText: '这是一段信息',
        };
    },
    methods: {
        showChild() {
            this.isShow = true;
        },
        closeHandler(e) {
            // console.log('1111');
            //   console.log(e);
        },
        handleClose() {
            this.dialogVisible = false
        },
    },
};
</script>
